<template>
	<view :class="['_status_tag', status == 'None' ? '_warning_tag' :
	    status == 'Paid' ? '_success_tag' :'_danger_tag' ]">
		{{
	      status == 'None' ? '待支付' :
	          status == 'Paid' ? '已支付' : '取消支付'
	
	    }}
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		status: {
			type: String,
			default: 'None'
		}
	})
</script>

<style lang="scss">
	._status_tag {
		width: max-content;
		padding: 0 8px;
		height: 22px;
		border-radius: 2px;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 22px;
	}

	._init_tag {
		background: #edeff2;
		color: #667280;
	}

	._primary_tag {
		background: rgba(32, 128, 247, .15);
		color: rgba(32, 128, 247, 1);
	}

	._warning_tag {
		background: rgba(255, 141, 26, .15);
		color: rgba(255, 141, 26, 1)
	}

	._success_tag {
		background: rgba(75, 207, 66, .15);
		color: rgba(75, 207, 66, 1)
	}

	._danger_tag {
		background: rgba(255, 87, 51, .15);
		color: rgba(255, 87, 51, 1)
	}

	._info_tag {
		background: rgba(121, 72, 234, .15);
		color: rgba(121, 72, 234, 1)
	}
</style>